<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <script src="./js/vue.js"></script>
    <script>
        function print(obj){
            console.log("print");
            // obj.onclick=null;
        }
        function show(){
            console.log("show");
        }
        window.onload=()=>{
            var btnDom=document.getElementById("btn");
            btnDom.addEventListener("click",function(){
                console.log("click1");
            })
            btnDom.addEventListener("click",function(){
                console.log("click2");
            })
        }
    </script>
</head>
<body>
    <!-- 静态事件绑定 onclick相当于属性，会覆盖 -->
    <input type="button" value="静态" onclick="print(this)" onclick="show()">
    <!-- 动态事件绑定 -->
    <input type="button" value="动态" id="btn">
    <hr>
    <div id="app" v-cloak>
        <!-- 1.基础绑定 -->
        <input type="button" value="vue的基础绑定" v-on:click="show()">
        <!-- 绑定事件的方法只能在vue实例的仓库中获取 -->
        <input type="button" value="vue的基础绑定" v-on:click="print()">
        <input type="button" value="vue的无参绑定" v-on:click="print">
        <input type="button" value="vue绑定的缩写" @click="print">

        <hr>
        <!-- 
            2.多事件的绑定
                
        -->
     <!-- a.不同事件的绑定 -->
        <input type="button" value="不同类型事件的绑定" @click="print()" @mouseover="printA">
            <!-- 如果这些事件都不需要参数，可以用对象完成绑定,@不能写，回调函数不能写() -->
        <input type="button" value="不同类型事件的绑定" 
        v-on="{ click:print,mouseover:printA }">
            <!-- 也可以将其定义在数据仓库中 -->
        <input type="button" value="不同类型事件的绑定"
        v-on="events">

        <!-- 同类型的事件不可以拆分绑定 ，不能省略()-->
        <input type="button" value="同类型事件多回调绑定" @click="[print(),printA()]">
            <!-- 一般习惯使用下面的写法 -->
        <input type="button" value="同类型事件多回调绑定" @click="print(),printA()">

        <hr>

        <!-- 3.行内表达式：在标签上直接实现对仓库数据变量的操作 -->
        <p>msg:{{msg}}</p>
        <p>info：{{info}}</p>
        <input type="button" value="修改仓库变量msg" @click="setMsg()">
        <!-- 行内的赋值 -->
        <input type="button" value="修改仓库变量" @click="msg='行内赋值';info='新值'">

        <hr>

        <!-- 4.参数传递 -->
        <input type="button" value="匿名变量" @click="printArgs('字符串',100,[1,2,3])">
        <input type="button" value="仓库变量" @click="printArgs(msg,info)">
        <!-- 页面中传入的this指的是window -->
        <input type="button" value="传this为window" @click="printArgs(this)">
        <!-- 事件源为$event -->
        <input type="text" @input="printArgs($event)"/>

        <p>{{inputStr}}</p>
        <input type="text" @input="inputStr=$event.target.value"/>
        <!-- 不写()默认自带事件源 -->
        <input type="text" @input="printVal"/>
        <hr>

        <!-- 5.动态事件名
            []中不接受驼峰定义
        -->
        <input type="button" value="动态事件" @[eventname]="print()">

        <input type="button" value="改变前面那牛的事件为mouseover" @click="eventname='mouseover'">

    </div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"仓库数据msg",
            info:"info变量",
            inputStr:"",
            eventname:"click",
            events:{
                click(){
                    console.log("click");
                },
                mouseover(){
                    console.log("mouserover");
                }
            }
        },
        methods: {
            print(){
                console.log("vue方法仓库的print方法");
            },
            printA(){
                console.log("vue方法仓库的printA方法");
            },
            setMsg(){
                // vue方法仓库中的this 指向vue实例对象
                // console.log(this);
                // vue的数据和方法直接写入到vue的根节点上
                this.msg="新数据";
            },
            printArgs(arg1,arg2,arg3){
                console.log("arg1:",arg1);
                console.log("arg2:",arg2);
                console.log("arg3:",arg3);
            },
            printVal(e){
                console.log(e.target.value);
            }
        }
    });
</script>
</html>